<template>
  <div class="big">
    <div class="big_1">
      <div
        class="ss"
        :style="{
          transform: `translateX(${
            all == active * -25.9375 ? active * -25.9375: ''
          }rem)`,
        }"
      
      >
        <div class="preImg">
          <img src="../../assets/images/logocat1.png" alt="" />
        </div>
        <div class="nextImg">
          <img src="../../assets/images/logodog1.png" alt="" />
        </div>
        <div class="texImg">
          <img src="../../assets/images/logodog2.png" alt="" />
          <div class="btn">
            <button @click="fun2">点击享受</button>
          </div>
        </div>
      </div>     
    </div>
    <ul id="sliderUl" class="sliderUl">
      <li
        v-for="(item, index) in 3"
        :key="index"
        @click="clickImgLi(index)"
        :class="active == index ? 'active' : ''"
      ></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "child-i",
  setup() {},
};
</script>

<script setup>
import { ref } from "vue";
import router from '@/router';
let active = ref(0);
let all = ref(0);
function clickImgLi(index) {
  clearInterval(time);
  active.value = index;
  all.value = index * -25.9375;
}
function beijlun() {
  let next = active.value == 2 ? 0 : active.value + 1;
  all.value = next * -25.9375;
  console.log(active.value <= 1 ? active.value++ : (active.value = 2));
}
let time = setInterval(beijlun, 2000);
function fun2() {
  router.push({
    path: "/about",
  });
}

</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.big {
  position: relative;
  width: 25.9375rem;
  margin: auto;
  background: white;
}
.big_1 {
  margin: 0 auto;
  position: relative;
  width: 25.9375rem;
  height: 100vh;
  overflow: hidden;
  transition: all 0.5s;
}
.ss {
  position: absolute;
  width: 78.125rem;
  height: 100%;
  margin: 0 auto;
  transition: all 500ms;
}

.preImg,
.nextImg,
.texImg {
  position: relative;
  margin: auto;
  width: 25.9375rem;
  height: 100vh;
  // border: .0625rem solid black;
  float: left;
}
.preImg > img {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.nextImg > img {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.texImg > img {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.texImg .btn {
  width: 9.0625rem;
  height: 2.625rem;
  // border: .0625rem solid brown;
  position: absolute;
  bottom: 23%;
  left: 0;
  right: 0;
  margin: 0 auto;
  button {
    font-size: 1.125rem;
    color: #000000;
    font-weight: bold;
    font-family: "Ping Fang  SC  Bold";
    border-radius: 1.1875rem;
    background-image: linear-gradient(180deg, #fb4679 0%, #fe7299 100%);
    width: 9.0625rem;
    height: 2.625rem;
    border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
    position: relative;
    border: none;
  }
}
.bottom {
  position: absolute;
  bottom: 0.625rem;
  display: inline-block;
  right: 50%;
}

.sliderUl {
  width: 25.9375rem;
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 0;
  margin: auto;
}
.sliderUl li {
  width: 0.875rem;
  height: 0.875rem;
  float: left;
  margin-right: 0.625rem;
  background-color: #d1d1d1;
  border-radius: 50%;
  position: relative;
  top: 0.125rem;
  left: 11.25rem;
  cursor: pointer;
}
#sliderUl .active {
  background-color: #fb4679;
}
</style>